<span>
  <div class="input-group">
    <span class="input-group-btn">
      <button class="btn btn-default" type="button" title="{{'add' | translate}}"
              data-ng-click="add();">
        <i class="fa fa-plus"/>
        <span>&nbsp;</span>
      </button>
    </span>
    <input type="text" class="form-control"
           placeholder="{{'searchACRS' | translate}}"
           data-ng-model="filter"
           data-ng-model-options="{debounce: 500}"/>

    <div class="list-group gn-autocomplete-list">
      <li href="" class="list-group-item"
          data-ng-repeat="crs in crsResults">{{crs.description}}<span
        class="pull-right">
          <a href="" data-ng-click="addCRS(crs)" class="fa fa-plus pull-right"
             title="{{'addCRS-help' | translate}}"/>
        </span>
      </li>
    </div>

    <div class="input-group-btn">
      <button class="btn btn-default" type="button"
              data-ng-show="crsResults.length != 0"
              data-ng-click="crsResults = []">
        <i class="fa fa-times"></i>
        <span>&nbsp;</span>
      </button>
    </div>

    <!-- The CRS to insert once received -->
    <div data-ng-if="snippet">
      <input name="{{snippetRef}}" type="hidden" value="{{snippet}}"/>
    </div>
  </div>

</span>
